<template>
	<div class="login-container">
		<el-card header="请先登录" class="login-card">
			<el-form v-on:submit.native.prevent="login">	<!-- 点击submit阻止原生方式的跳转， -->
				<!-- 具体看登录接口models/admin/index.js -->
				<el-form-item label="用户名">
					<el-input v-model="model.username"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input type="password" v-model="model.password"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" native-type="submit">登录</el-button>	<!-- 原生方式=submit 提交按钮 -->
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
export default {
	data(){
		return{
			model:{}
		}
	},
	methods:{
		async login(){
			// login操作 POST,接收res
			const res = await this.$http.post('/login',this.model)		//http://localhost:3000/admin/api/login   ？？为什么http.js中baseUrl写的是baseURL:"http://localhost:3000/admin/api" ，能跳转到/login
			// console.table(res)
			// sessionStorage.token = res.data.token		
			//储存在localStorage,本地存储，即使刷新页面，也不会退出登录状态
			localStorage.token = res.data.token

			this.$router.push('/')	//路由跳转到主页:  http://localhost:8080/

			this.$message({			//element-ui的弹出消息框，登陆成功
        type: 'success',
        message: '登录成功'
      })
		}
	}
}
</script>

<style>
.login-card{
  width: 25rem;					/*宽度*/
  margin: 5rem auto;		/*外边距5rem且水平居中*/
}
</style>